<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="nav1">
            <publicNavigation :pub="pub"></publicNavigation>
          </div>
          <div id="box" :style="{ height:height }">
            <div class="payment-method">
              <p class="p1">支付方式</p>
              <div class="items">
                <div class="item">
                  <div class="input">
                    <input type="checkbox" name="payment" checked>
                    <label>预存款支付</label>
                  </div>
                  <p class="p2">*启用后，客户下单时，可使用预存款支付</p>
                  <span class="span1">设为默认</span>
                </div>
                <div class="item">
                  <div class="input">
                    <input type="checkbox" name="payment">
                    <label>微信支付</label>
                  </div>
                  <p class="p2">*启用后，客户下单时，可使用微信支付，请先在财务设置设置支付参数</p>
                  <span class="span1">设为默认</span>
                </div>
                <div class="item">
                  <div class="input">
                    <input type="checkbox" name="payment">
                    <label>支付宝支付</label>
                  </div>
                  <p class="p2">*启用后，客户下单时，可使用支付宝支付，请先在财务设置设置支付参数</p>
                  <span class="span1">设为默认</span>
                </div>
                <div class="item">
                  <div class="input">
                    <input type="checkbox" name="payment" checked>
                    <label>线下支付</label>
                  </div>
                  <p class="p2">
                    <span>[默认]</span>*启用后，客户下单时，可使用线下支付
                  </p>
                  <span class="span1">设为默认</span>
                </div>
              </div>
            </div>
            <div class="delivery">
              <p class="p1">配送方式</p>
              <div class="items">
                <div class="input">
                  <input type="checkbox" name="delivery">
                  <label>快递</label>
                  <span class="span1" v-if="span1_0">[默认]</span>
                  <span class="span2" v-if="span2_0" @click="start(1)">设为默认</span>
                  <span class="span3" v-if="span1_0" @click="start(1)">取消默认</span>
                </div>
                <div class="input">
                  <input type="checkbox" name="delivery">
                  <label>送货上门</label>
                  <span class="span1" v-if="span1_1">[默认]</span>
                  <span class="span2" v-if="span2_1" @click="start(2)">设为默认</span>
                  <span class="span3" v-if="span1_1" @click="start(2)">取消默认</span>
                </div>
                <div class="input">
                  <input type="checkbox" name="delivery">
                  <label>上门自取</label>
                  <span class="span1" v-if="span1_2">[默认]</span>
                  <span class="span2" v-if="span2_2" @click="start(3)">设为默认</span>
                  <span class="span3" v-if="span1_2" @click="start(3)">取消默认</span>
                </div>
                <div class="input">
                  <input type="checkbox" name="delivery">
                  <label>物流货运</label>
                  <span class="span1" v-if="span1_3">[默认]</span>
                  <span class="span2" v-if="span2_3" @click="start(4)">设为默认</span>
                  <span class="span3" v-if="span1_3" @click="start(4)">取消默认</span>
                </div>
                <div class="input">
                  <input type="checkbox" name="delivery">
                  <label>其他</label>
                  <span class="span1" v-if="span1_4">[默认]</span>
                  <span class="span2" v-if="span2_4" @click="start(5)">设为默认</span>
                  <span class="span3" v-if="span1_4" @click="start(5)">取消默认</span>
                </div>
              </div>
            </div>
            <div class="delivery-time">
              <p class="p1">交货时间</p>
              <div class="input">
                <input type="checkbox" name="time">
                <label>开启交货时间必填</label>
                <p class="p2">*启用后，下单时，必须填写交货时间</p>
              </div>
            </div>
            <div class="amount-limitation">
              <p class="p1">下单金额限制</p>
              <div class="input">
                <input type="checkbox" name="amountLimitation">
                <label>开启最低下单金额限制，限制在</label>
                <el-input size="mini" v-model="amountLimitation" placeholder="请输入金额" clearable></el-input>
                <label>及其以上</label>
              </div>
              <p class="p2">*启用后，当客户在订货平台下单时，必须等于或大于此订单金额才能提交订单。但管理后台代下单、修改订单不受此限制。</p>
            </div>
            <div class="check">
              <p class="p1">订单核对</p>
              <div class="input">
                <input type="checkbox" name="check">
                <label>开启订单核对</label>
                <p class="p2">*启用后，可对已完成订单修改。适用于，订单在发货后因配送环节或其他因素导致客户签收环节，需要对订货商品数量和金额进行调整。</p>
              </div>
            </div>
            <div class="invoice">
              <p class="p1">订单发票</p>
              <div class="items">
                <div class="input">
                  <input type="checkbox" name="invoice" @change="taxRates()">
                  <label>开启订单核对</label>
                </div>
                <p class="p2">*启用后，客户下单时可以填写发票抬头、发票内容、税费；下面可设置对应发票类型税率</p>
                <div class="input">
                  <input type="checkbox" name="invoice">
                  <label>商品价格含税</label>
                </div>
                <p class="p2">*启用后，订单税费仅列明细，不更改合计金额</p>
              </div>
              <div class="shui" v-if="taxRate">
                <div class="item">
                  <p>
                    <span>*</span>增值税普通发票
                  </p>
                  <el-input size="mini" placeholder="请输入税率" v-model="shui1" clearable></el-input>
                  <span>%</span>
                </div>
                <div class="item">
                  <p>
                    <span>*</span>增值税专用发票
                  </p>
                  <el-input size="mini" placeholder="请输入税率" v-model="shui2" clearable></el-input>
                  <span>%</span>
                </div>
                <div class="item">
                  <p>
                    <span>*</span>其他发票
                  </p>
                  <el-input size="mini" placeholder="请输入税率" v-model="shui3" clearable></el-input>
                  <span>%</span>
                </div>
              </div>
            </div>
            <div class="confirm">
              <p class="p1">自动确认收货</p>
              <div class="input">
                <input type="checkbox" name="confirm">
                <label>开启自动确认收货，当发货后超过</label>
                <el-input size="mini" v-model="confirm" placeholder="请输入天数" clearable></el-input>
                <label>天未确认收货，系统会默认收货</label>
              </div>
            </div>
            <div class="order-price">
              <p class="p1">订单价格</p>
              <div class="items">
                <div class="input">
                  <input type="checkbox" name="order-price">
                  <label>开启代客下单/编辑订单允许改价</label>
                </div>
                <p class="p2">*启用后，代课下单时，可以修改商品订货价</p>
                <div class="input">
                  <input type="checkbox" name="order-price">
                  <label>开启订单特批价</label>
                </div>
                <p class="p2">*启用后，审核订单时，可以选择是否给订单的总价进行修改</p>
              </div>
            </div>
            <div class="ordering-unit">
              <p class="p1">订货单位设置</p>
              <div class="input">
                <input type="radio" name="orderingUunit">
                <label>默认按基本单位订货</label>
              </div>
              <div class="input">
                <input type="radio" name="orderingUunit">
                <label>默认按最大辅助单位订货</label>
              </div>
            </div>
            <div class="out-of-warehouse">
              <p class="p1">出库发货限制</p>
              <div class="input">
                <input type="radio" name="warehouse">
                <label>全部付款，才可出库发货</label>
              </div>
              <div class="input">
                <input type="radio" name="warehouse">
                <label>付款金额不低于出库商品金额，才可出库发货</label>
              </div>
              <div class="input">
                <input type="radio" name="warehouse">
                <label>不限制</label>
              </div>
            </div>
            <div class="inventory-limitation">
              <p class="p1">库存限制</p>
              <div class="items">
                <div class="input">
                  <input type="checkbox" name="limitation">
                  <label>开启下单商品库存限制</label>
                </div>
                <p class="p2">*可用库存数量小于零，禁止订货</p>
                <div class="input">
                  <input type="checkbox" name="limitation">
                  <label>开启出库商品库存限制</label>
                </div>
                <p class="p2">*系统库存数量小于零，禁止出库</p>
              </div>
            </div>
            <div class="return-goods">
              <p class="p1">退货设置</p>
              <div class="items">
                <div class="item">
                  <p class="p3">
                    订单完成
                    <el-input size="mini" placeholder="请输入天数" v-model="days" clearable></el-input>天后不允许客户退货
                  </p>
                  <p class="p2">*设置退货时间，请输入范围0~365</p>
                </div>
                <div class="item">
                  <p class="p3">客户默认退货仓库</p>
                  <el-select size="mini" v-model="goods" clearable placeholder="上海仓">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="item">
                  <input type="checkbox" name="return">
                  <label>开启仅允许客户从订单发起退货</label>
                  <p class="p2">*如需限制客户退货商品数量，可启用此设置项</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import publicNavigation from '@/views/setUp/publicNavigation/publicNavigation'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      pub: '3',
      height: '',
      amountLimitation: '',
      shui1: '',
      shui2: '',
      shui3: '',
      confirm: '',
      taxRate: false,
      days: '',
      goods: '',
      span1_0: false,
      span1_1: false,
      span1_2: false,
      span1_3: false,
      span1_4: false,
      span2_0: true,
      span2_1: true,
      span2_2: true,
      span2_3: true,
      span2_4: true,
      options: [
        {
          value: '上海仓',
          label: '上海仓'
        },
        {
          value: '深圳仓',
          label: '深圳仓'
        },
        {
          value: '南京仓',
          label: '南京仓'
        },
        {
          value: '广州仓',
          label: '广州仓'
        }
      ],
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '销售设置',
          path: ''
        }
      ]
    }
  },
  created () {
    this.getHeight()
  },
  methods: {
    getHeight () {
      this.height = window.innerHeight - 180 + 'px'
    },
    taxRates () {
      this.taxRate = !this.taxRate
    },
    start (num) {
      switch (num) {
        case 1: this.span1_0 = !this.span1_0; this.span2_0 = !this.span2_0; break
        case 2: this.span1_1 = !this.span1_1; this.span2_1 = !this.span2_1; break
        case 3: this.span1_2 = !this.span1_2; this.span2_2 = !this.span2_2; break
        case 4: this.span1_3 = !this.span1_3; this.span2_3 = !this.span2_3; break
        case 5: this.span1_4 = !this.span1_4; this.span2_4 = !this.span2_4; break
      }
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    publicNavigation
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    #box {
      overflow-y: scroll;
      padding: 0px 20px;
      .payment-method {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .items {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          .item {
            margin-top: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .input {
              label {
                margin-left: 10px;
                font-size: 14px;
              }
              input[type="checkbox"] {
                width: 16px;
                height: 16px;
                display: inline-block;
                vertical-align: middle;
                outline: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                border: 1px solid #c4b3c4;
                border-radius: 2px;
                background-color: none;
                position: relative;
                cursor: pointer;
              }
              input[type="checkbox"]:checked::before {
                content: "00";
                color: transparent;
                -webkit-appearance: none;
                -moz-appearance: none;
                background: url("../../../../static/images/xuanzhong.png")
                  no-repeat;
                background-size: 16px 16px;
                border: 1px solid #20ade5;
                border-radius: 2px;
                cursor: pointer;
                position: absolute;
                top: -2px;
                left: -1px;
              }
            }
            .p2 {
              font-size: 12px;
              color: #999;
              span {
                font-size: 14px;
                color: #20bfef;
              }
            }
            .span1 {
              margin-left: 20px;
              font-size: 12px;
              color: #000;
              display: none;
              cursor: pointer;
            }
            &:hover {
              .span1 {
                display: inline-block;
              }
            }
          }
        }
      }
      .delivery {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .items {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;

          .input {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 10px;
            input[type="checkbox"] {
              width: 16px;
              height: 16px;
              display: inline-block;
              vertical-align: middle;
              outline: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              border: 1px solid #c4b3c4;
              border-radius: 2px;
              background-color: none;
              position: relative;
              cursor: pointer;
            }
            input[type="checkbox"]:checked::before {
              content: "00";
              color: transparent;
              -webkit-appearance: none;
              -moz-appearance: none;
              background: url("../../../../static/images/xuanzhong.png")
                no-repeat;
              background-size: 16px 16px;
              border: 1px solid #20ade5;
              border-radius: 2px;
              cursor: pointer;
              position: absolute;
              top: -2px;
              left: -1px;
            }
            label {
              font-size: 14px;
              margin-left: 10px;
            }
            .span1 {
              font-size: 14px;
              color: #20bfef;
              margin-left: 2px;
            }
            .span2,
            .span3 {
              font-size: 12px;
              color: #000;
              margin-left: 20px;
              cursor: pointer;
              display: none;
            }
            &:hover {
              .span2,
              .span3 {
                display: inline-block;
              }
            }
          }
        }
      }
      .delivery-time,
      .check {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .input {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 10px;
          input[type="checkbox"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #c4b3c4;
            border-radius: 2px;
            background-color: none;
            position: relative;
            cursor: pointer;
          }
          input[type="checkbox"]:checked::before {
            content: "00";
            color: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url("../../../../static/images/xuanzhong.png") no-repeat;
            background-size: 16px 16px;
            border: 1px solid #20ade5;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            top: -2px;
            left: -1px;
          }
          label {
            font-size: 14px;
            margin-left: 10px;
          }
          .p2 {
            font-size: 12px;
            color: #c4b3c4;
            margin-left: 2px;
          }
        }
      }
      .amount-limitation,
      .confirm {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .input {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 10px;
          input[type="checkbox"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #c4b3c4;
            border-radius: 2px;
            background-color: none;
            position: relative;
            cursor: pointer;
          }
          input[type="checkbox"]:checked::before {
            content: "00";
            color: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url("../../../../static/images/xuanzhong.png") no-repeat;
            background-size: 16px 16px;
            border: 1px solid #20ade5;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            top: -2px;
            left: -1px;
          }
          label {
            font-size: 14px;
            margin-left: 10px;
            margin-right: 10px;
          }
          /deep/ .el-input.el-input--suffix {
            width: 10% !important;
          }
          /deep/ .el-input__inner {
            width: 100% !important;
          }
        }
        .p2 {
          margin-top: 5px;
          font-size: 12px;
          color: #c4b3c4;
        }
      }
      .invoice,
      .order-price,
      .inventory-limitation {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .items {
          .p2 {
            margin-top: 8px;
            font-size: 12px;
            color: #c4b3c4;
          }
          .input {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 10px;
            input[type="checkbox"] {
              width: 16px;
              height: 16px;
              display: inline-block;
              vertical-align: middle;
              outline: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              border: 1px solid #c4b3c4;
              border-radius: 2px;
              background-color: none;
              position: relative;
              cursor: pointer;
            }
            input[type="checkbox"]:checked::before {
              content: "00";
              color: transparent;
              -webkit-appearance: none;
              -moz-appearance: none;
              background: url("../../../../static/images/xuanzhong.png")
                no-repeat;
              background-size: 16px 16px;
              border: 1px solid #20ade5;
              border-radius: 2px;
              cursor: pointer;
              position: absolute;
              top: -2px;
              left: -1px;
            }
            label {
              font-size: 14px;
              margin-left: 10px;
              margin-right: 10px;
            }
          }
        }
        .shui {
          .item {
            display: flex;
            align-items: center;
            margin-top: 5px;
            font-size: 14px;
            p {
              width: 10%;
              span {
                color: #ff3872;
                font-size: 10px;
              }
            }
            /deep/ .el-input.el-input--suffix {
              width: 10% !important;
              margin: 2px 2px;
            }
          }
        }
      }
      .ordering-unit,
      .out-of-warehouse {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .input {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
          label {
            margin-left: 5px;
            font-size: 14px;
          }
          input[type="radio"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            background-color: none;
            border: 1px solid #b5bbc4;
            border-radius: 50%;
            margin-right: 8px;
            position: relative;
            cursor: pointer;
          }
          input[type="radio"]:checked::before {
            content: "00";
            color: transparent;
            position: absolute;
            top: 1.5px;
            left: 1.5px;
            border: 1px solid #20ade5;
            border-radius: 50%;
            background-color: #20ade5;
            width: 11px;
            height: 11px;
            box-sizing: border-box;
          }
          input[type="radio"]:checked {
            border: 1px solid #20ade5;
          }
        }
      }
      .return-goods {
        padding: 10px 0px 10px;
        border-bottom: 1px solid #e3e3ee;
        .p1 {
          font-weight: 700;
        }
        .items {
          .item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .p2 {
              font-size: 12px;
              color: #999;
            }
            .p3 {
              font-weight: normal;
              font-size: 14px;
              /deep/ .el-input.el-input--suffix {
                width: 10% !important;
              }
            }
            /deep/ .el-select.el-input--suffix {
              width: 10% !important;
            }
            input[type="checkbox"] {
              width: 16px;
              height: 16px;
              display: inline-block;
              vertical-align: middle;
              outline: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              border: 1px solid #c4b3c4;
              border-radius: 2px;
              background-color: none;
              position: relative;
              cursor: pointer;
            }
            input[type="checkbox"]:checked::before {
              content: "00";
              color: transparent;
              -webkit-appearance: none;
              -moz-appearance: none;
              background: url("../../../../static/images/xuanzhong.png")
                no-repeat;
              background-size: 16px 16px;
              width: 14px;
              height: 14px;
              border: 1px solid #20ade5;
              border-radius: 2px;
              cursor: pointer;
              position: absolute;
              top: -1px;
              left: -1px;
            }
            label {
            }
          }
        }
      }
    }
  }
}
</style>
